<template>
  <el-container style="background-image:url(http://124.71.115.11/zm/static/login3.jpeg);">
    <el-header style="font-size:xx-large;color:#FF8000;text-align: center;">
      追梦学习资源分享平台
      <div class="line"></div>
    </el-header>
    <div>
      <el-row :gutter="10">
        <el-col  :xs="24" :sm="8" :md="8" :lg="8">
          <div class="grid-content ">

            <div v-show="isShow">
              <div class="login-box" v-show="isShow2">
                <h1 class="login-title" style="color: palevioletred;">欢迎登录</h1>
                <el-form ref="login" :model="user" status-icon label-width="90px" class="demo-ruleForm">
                  <el-form-item label="用户名" prop="username"><el-input type="text" v-model="user.username" placeholder="输入用户名"></el-input></el-form-item>
                  <el-form-item label="密码" prop="password"><el-input type="password" v-model="user.password" placeholder="输入密码"></el-input></el-form-item>
                  <el-form-item>
                    <el-button size="small" type="success" @click="submit('login')">登录</el-button>
                    <el-button type="danger" size="small" @click="resetForm('login')">重置</el-button>
                    <a href="javascript:;" @click="change3" style="color: #D9D9D9;text-decoration: none;"><b>忘记密码</b></a>
                    <a style="text-decoration: none;color: deeppink;" href="javascript:;" @click="change2"><b>注册</b></a>
                  </el-form-item>
                </el-form>
              </div>
              <div class="register-box" v-show="!isShow2">
                 <h1 class="login-title" style="color: lightpink;">重置密码</h1>
                <el-form status-icon label-width="100px" class="demo-ruleForm">
                  <el-form-item label="用户名" prop="username"><el-input type="text" v-model="username" placeholder="输入用户名"></el-input></el-form-item>
                  <el-form-item label="新密码" prop="password"><el-input type="password" v-model="newPwd" placeholder="密码包含字母,数字和特殊符号"></el-input></el-form-item>
                  <el-form-item label="确认密码" prop="password2"><el-input type="password" v-model="password2" placeholder="确认密码"></el-input></el-form-item>
                 <el-form-item label="QQ" prop="qqEmail"><el-input type="text" v-model="qqEmail" placeholder="输入QQ号"></el-input></el-form-item>
                 <el-form-item prop="code">
                   <el-button round v-if="isClick" type="primary" size="mini" @click="getMail()">{{ text }}</el-button>
                   <el-button v-else size="mini" circle type="infor">{{text2}}</el-button>
                   <el-input type="text" v-model="code" placeholder="输入QQ邮箱验证码"></el-input>
                 </el-form-item>
                 <el-form-item>

                   <el-button style="float: left;" type="success" size="small" @click="pwdUser()">确认</el-button>
                    <el-button style="float: left;" size="small" type="danger"  @click="del()">取消</el-button>
                   </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="register-box" v-show="!isShow">
              <h1 class="register-title" style="color: hotpink">欢迎注册</h1>
              <el-form status-icon label-width="90px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username"><el-input type="text" v-model="username" placeholder="输入用户名"></el-input></el-form-item>
                <el-form-item label="新密码" prop="password"><el-input type="password" v-model="password" placeholder="密码包含字母,数字和特殊符号"></el-input></el-form-item>
                <el-form-item label="确认密码" prop="password2"><el-input type="password" v-model="password2" placeholder="确认密码"></el-input></el-form-item>
                <el-form-item label="手机号" prop="phone"><el-input type="text" v-model="phone" placeholder="输入手机号"></el-input></el-form-item>
                <el-form-item label="QQ" prop="qqEmail"><el-input type="text" v-model="qqEmail" placeholder="输入QQ号"></el-input></el-form-item>
                <el-form-item prop="code">
                  <el-button round v-if="isClick" type="danger" size="mini" @click="getMail()">{{ text }}</el-button>
                  <el-button v-else size="mini" circle type="primary">{{text2}}</el-button>
                  <el-input type="text" v-model="code" placeholder="输入QQ邮箱验证码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" size="small" @click="getRegister()">注册</el-button>
                  已注册？
                  <a style="text-decoration: none;color: skyblue" href="javascript:;" @click="change1"><b>登录</b></a>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="16" :md="16" :lg="16">
          <div class="grid-content " style="text-align: -webkit-center;margin: 0 auto;">
            <el-carousel class="hidden-xs-only" :interval="4000" type="card"  v-show="isShow">
              <el-carousel-item v-for="img in imgs" :key="img">
                <h3 class="small"><img :src="img" /></h3>
              </el-carousel-item>
            </el-carousel>
            <el-card class="box-card" v-show="!isShow" style="width:75%;margin: 2%;">
              <div slot="header" class="clearfix"><span style="color: red;">追梦学习资源分享平台</span></div>
              <div class="text item" style="color:deeppink">
                亲爱的同学,欢迎来到追梦资源分享平台，本网站注册账号免费，目前暂时不开放短信验证，短信要签名，
                但对于有毕设需求的同学，本平台可以私下帮做测试版短信验证，仅供三四个人使用。本网站收集了各种
                关于软件开发方面的技术的知识，包括后端，前端，运维。希望这些资料能帮助大家提升开发技术水平。
              </div>
            </el-card>
            <el-card class="box-card" v-show="isShow" style="text-align: center;width: 80%;margin: 2%;margin-bottom: 5%;">
              <div slot="header" class="clearfix"><span style="color: red;">追梦学习资源分享平台</span></div>
              <div class="text item" style="color:deeppink">
                亲爱的同学,您好! 大家可以在购买后直接在订单中下载对应资料, 本站可能不会永久提供请购买之后下载服务,建议一定要将资料保存到自己的本地机器中!!!资料部分免费 收费:
                为什么收费? 搭建云服务不是免费的,资料的笔记整理不易,所以这就是收费的原因,但大家可以放心每一份资料不会超过8元,再一次感谢各位的理解和包容(不喜勿喷!!!) 最后:
                开发比较急,可能存在各种BUG,部分功能目前暂时不支持，比如支付功能,域名访问，因为支付宝要签名，域名要备案，当然，有毕设需求的小伙伴，本网站可以帮做支付宝沙箱或微信一分钱支付，
                想要下载资料,向QQ1434103454发送红包索要下载密码,另外使用遇到问题联系QQ1434103454!!
                友情提醒:建议收藏本网站,方便日后快速找到!
              </div>
            </el-card>
             <img v-show="!isShow" src="http://124.71.115.11/zm/static/zm2.jpg" style="width: 70%;height:50%;" class="hidden-xs-only" />
          </div>
        </el-col>
      </el-row>
    </div>
   <el-footer style="color: #FA5858;">关于在本站下载任何资料，有问题请联系QQ1434103454</el-footer>
  </el-container>
</template>

<script>
import Footer from '@/components/Footer';
import Header from '@/components/Header';
export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      },
      imgs: ['http://124.71.115.11/zm/static/zm0.jpg', 'http://124.71.115.11/zm/static/zm11.jpg', 'http://124.71.115.11/zm/static/zm12.jpg'],
       isShow2:true,
      isShow: true,
      newPwd:'',
      username: '',
      password: '',
      password2: '',
      phone: '',
      qqEmail: '',
      mailKey: '',
      msg: null,
      timer: null,
      text: '获取验证码',
      text2:null,
      isClick: true,
      countdown: 60,
      code: '',
      user2: {},
      showTime:true,
      token: null
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this;
          this.axios
            .post(this.apiUrl2 + '/user/login', this.user)
            .then(res => {

              if (res.data.state) {
                (_this.user2 = res.data.user), (_this.token = res.data.token), _this.$store.dispatch('asyncUpdateUser', _this.user2);
                _this.$store.dispatch('asyncUpdateToken', _this.token);

                this.$message({
                  message: '恭喜你，成功登录',
                  type: 'success'
                });
                _this.$router.push('/home');
              } else {
               _this.$message({
                 message: res.data.msg,
                 type: 'warning'
               });
              }
            })
            .catch(err => {
              console.log(err);
              this.$message('网络问题....');
            });
        } else {
          this.$message.error('用户名或密码错误');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$message({
        message: '重置表单成功！',
        type: 'warning'
      });
    },
    change1() {
      this.isShow = !this.isShow;
    },
    change2() {
      this.isShow = false;
    },
    change3(){
      this.isShow2=false;
    },
    loading() {
      //启动定时器
      this.countdown -= 1; //定时器减1
      this.text2 = this.countdown ;
    },
    clearTimer() {
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
      this.isClick = true;
      // this.showTime=true;
      this.countdown = 60;
    },
    //获取QQ邮箱验证码
    getMail() {

      //创建定时器
      let _this = this;
      this.axios.get(this.apiUrl2 + '/user/mail?qqEmail=' + this.qqEmail).then(res => {
		  if(res.data.state){
			  if (_this.isClick == false) {
			    return;
			  }
			  _this.isClick = false;
			  _this.loading(); //启动定时器
			  // this.showTime=false;
			  _this.timer = setInterval(() => {
			    if (_this.countdown == 0) {
			      //设置的定时器时间为0后执行的操作
			      _this.timer && _this.clearTimer(); //关闭定时器
			    } else {
			      _this.loading();
			    }
			  }, 1000);

			  _this.mailKey = res.data.mailKey;
			  _this.$message({
			    message: res.data.msg,
			    type: 'success'
			  });
		  }else{
			  _this.clearTimer();
			  this.$message({
			    message: res.data.msg,
			    type: 'warning'
			  });
		  }

      });
    },
    pwdUser(){
       this.$store.dispatch('asyncDelToken');
      var userParam = {
        newPwd:this.newPwd,
        qqEmail:this.qqEmail,
        password2:this.password2,
        username:this.username,
        code:this.code,
        mailKey:this.mailKey
      };
      console.log(userParam)
      let _this = this;
      this.axios.post(this.apiUrl2 + '/user/pwd3', userParam).then(res => {

        if (res.data.state) {

          _this.isShow2=true,
          _this.$message({

            message: '密码重置成功',
            type: 'success'
          });

        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    del(){
      this.isShow2=true;
    },
    //用来注册用户信息
    getRegister() {
      var _this = this;

      var userParam = {
        username: this.username,
        code: this.code,
        phone: this.phone,
        password: this.password,
        password2: this.password2,
        qqEmail: this.qqEmail,
        mailKey: this.mailKey
      };

      this.axios.post(this.apiUrl2 + '/user/mailRegister', userParam).then(res => {
        if (res.data.state) {
          _this.isShow=true,
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });
        } else {
          _this.$message.error(res.data.msg);
        }
      });
    }
  }
};
</script>

<style>
.register-box {
 width: 70%;
 height: 100%;
 padding: 20px 50px 10px 10px;
 margin: auto;
 margin-left: 7%;
 margin-right: 7%;
 margin-top: 5%;
 margin-bottom: 5%;
 float: initial;
 background-color: rgba(255, 255, 255, 0.5);
 border: 2px solid rgba(128, 128, 128, 0.2);
 border-radius: 10px;

}
.register-title {
  text-align: center;
  margin-left: 20px;
}

.login-box {
  width: 70%;
  height: 100%;
  padding: 20px 50px 10px 10px;
  margin: auto;
  margin-left: 7%;
  margin-right: 7%;
  margin-top: 7%;

  padding: 20px 50px 10px 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(128, 128, 128, 0.2);
  border-radius: 10px;
}
.login-title {
  text-align: center;
  margin-left: 20px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.el-header,
.el-footer {
  /*  background-color: #B3C0D1; */
  /*    background-image: url(http://124.71.115.11/zm/static/zm6.jpg); */
  /*  color: #333; */
  /* text-align: center; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 50px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 10px;
}
</style>
